<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-08 18:46:19
component:     employees
Copyright © YourCompanyName All rights reserved
-->
<template>
  <el-card style="margin-bottom: 24px">
    <FormComponent :initialValues="initialValues" ref="formRef" :config="formConfig">
      <template #submit>
        <div style="margin-left: 24px">
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
        </div>
      </template>
    </FormComponent>
  </el-card>
  <el-card>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column label="序号" width="80">
        <template #default="scope">
          {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" />
      <el-table-column label="所属组织" prop="deptName" />
      <el-table-column label="录单个数" prop="orderNumber" />
      <el-table-column label="加价营业额" prop="extraAmount" />
      <el-table-column label="套餐营业额" prop="packageAmount" />
      <el-table-column label="套餐总营业额" prop="totalAmount" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { placeOrderStatistics } from '@/api/statistical-report'
import FormComponent from '@/components/FormComponent/index.vue'
import { useSimpleDept } from '@/hooks/useSimpleDept'
import { defaultTime } from '@/utils'
import dayjs from 'dayjs'

const { deptList } = useSimpleDept()

// ==================== 表单  ====================

const formRef = ref<InstanceType<typeof FormComponent>>()
const initialValues = ref({
  orderTime: [
    dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
  ]
})
const formConfig = ref([
  {
    label: '订单创建',
    prop: 'orderTime',
    type: 'date',
    options: {
      type: 'datetimerange',
      defaultTime: defaultTime,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      rangeSeparator: '-',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间'
    }
  },
  {
    label: '所属组织',
    prop: 'deptId',
    type: 'select',
    options: {
      placeholder: '请选择所属组织',
      style: 'width: 240px',
      options: deptList
    }
  }
])

// --------------------  表格  ---------------------
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  formRef.value?.handleReset()
  handleQuery()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const [orderStart, orderEnd] = formRef.value?.formData.orderTime || []
    const data = await placeOrderStatistics({
      ...queryParams,
      signed: 0,
      queryByDept: 0,
      ...formRef.value?.formData,
      orderStart,
      orderEnd
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 初始化 */
onMounted(() => {
  getList()
})
const getSummaries = (param) => {
  const { columns, data } = param
  const summaries: string[] = []

  // 遍历列
  columns.forEach((column, index) => {
    if (index === 0) {
      summaries[index] = '合计'
    } else if (
      ['orderNumber', 'extraAmount', 'packageAmount', 'totalAmount'].includes(column.property)
    ) {
      summaries[index] = data.reduce((sum, item) => sum + (item[column.property] || 0), 0)
    } else {
      summaries[index] = ''
    }
  })

  return summaries
}
</script>
